<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>树状模块</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="js/lay-module/dtree/dtree.css">
		<link rel="stylesheet" href="js/lay-module/dtree/font/dtreefont.css">
	</head>

	<body>
		<div class="dialog-tree-div">
			<div class="dialog-show-tree">
				<ul id="demoTree" class="dtree" data-id="-1"></ul>
			</div>
		</div>
		<input type="text" id="roleid" name="roleid" hidden="hidden" />
		<script src="js/global.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.extend({
				dtree: '{/}js/lay-module/dtree/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
			}).use(['dtree', 'layer', 'jquery'], function() {
				var dtree = layui.dtree,
					layer = layui.layer,
					$ = layui.jquery;
				var list = new Array();
				setTimeout(function() {
					$.post(globalData.server + "public/getAllBoxRoleMenus", {
						"roleid": $("#roleid").val(),
					}, function(res) {
						if(res.count > 0) {
							for(var i = 0; i < res.data.length; i++) {
								list.push(res.data[i].menuid)
							}
						}
					}, "json");
					// 初始化树
					setTimeout(function() {
						var DTreeNode = dtree.render({
							elem: "#demoTree",
							url : globalData.server + "public/getAllMenus",
							method: 'get',
							dataStyle: "layuiStyle", //使用layui风格的数据格式
							dataFormat: "list", //配置data的风格为list
							response: {
								message: "msg",
								statusCode: 0
							}, //修改response中返回数据的定义
							checkbar: true,
							line: true,
							checkbarType: "self", // 默认就是all，其他的值为： no-all  p-casc   self  only
							checkbarData: "choose", // choose记录选中（默认）， "change"：记录变更， "all"：记录全部
							done: function(res, $ul, first) {
								if(first) {
									if(list.length > 0) {
										dtree.chooseDataInit("demoTree", list); // 初始化选中
									} else {
										dtree.chooseDataInit("demoTree", null); // 初始化选中
									}
									// 或者是
									// dtree.chooseDataInit("checkbarTreeInitchoose",["001001","001002"]); // 初始化选中
									// 多级复选框下使用二维数组初始化
									// dtree.chooseDataInit("checkbarTreeInitchoose",[["001001","001002"],["001003","001004"]]);
								}
							},
							checkbarFun: {
								chooseBefore: function($i, node) {
									if(node.checked == "0") {
										console.log(node);
										$.post(globalData.server + "public/addrMenus", {
											"roleid": $("#roleid").val(),
											"menuid": node.nodeId
										}, function(res) {
											if(res.count > 0) {
												layer.msg("添加成功", {
													icon: 1,
													time: 3000
												});
											} else {
												layer.msg("添加失败", {
													icon: 2,
													time: 3000
												})
											}
										}, "json");
									} else if(node.checked == "1") {
										console.log(node);
										$.post(globalData.server + "public/delrMenus", {
											"roleid": $("#roleid").val(),
											"menuid": node.nodeId
										}, function(res) {
											if(res.count > 0) {
												layer.msg("取消成功", {
													icon: 1,
													time: 3000
												});
											} else {
												layer.msg("取消失败", {
													icon: 2,
													time: 3000
												})
											}
										}, "json");
									};
									return true; // 注意，如果执行了某些操作，此处必须为false，否则，默认返回true。
								}
							}
						});
					}, 120);
				}, 100);
			});
		</script>
	</body>

</html>